<template>
  <div class="about">
   
   
    <div class="loginUser" >
      <router-link to="/" ><img  class="userIcon" :src="avatar"></router-link>
      <span>用户名</span>
    </div>
      <div class="aboutTop" >
      <span class="loginBtn"><router-link to="/login">登陆</router-link></span>
      <span class="newAccount"><router-link to="/resign">注册新账号</router-link></span>
    </div>

     <div v-transfer-dom>
      <confirm >
          <p style="text-align:center;">你确定要退出吗？</p>
      </confirm>
    </div>   

    <group>
     

      <cell title="设置"   ></cell>
      <cell title="意见反馈" is-link link="/"></cell>
    </group>
    
     <span class="showConfirm">退出登陆</span>
   </div>
  </div>
</template>

<script>
import { Confirm, Group, XSwitch, XButton, TransferDomDirective as TransferDom } from 'vux'
import { Cell, CellBox } from 'vux'
import { mapState } from 'vuex'


export default {
  created() {
  
  },
  directives: {
    TransferDom
  },
  components: {
    Group,
    Cell,
    Confirm,
    XSwitch,
    XButton
  },
  data() {
    return{
      userName:'',
      show: false,
      avatar:''
    }
  }

}      

  

</script>

<style scoped lang="less">
.about{
  margin-bottom: 90px;
}
.aboutTop{
  padding-top: 10px;
}
.newAccount a{
  display: block;
  color:darkorange;
  font-weight: 200;
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
}
.loginBtn{
   a{
    display: block;
    width: 60%;
    position: relative;
    margin: 0 auto;
    border: 1px solid orange;
    text-align: center;
    color: darkorange;
    border-radius: 8px;
    line-height: 42px;
    font-size: 18px;
   }
}
.loginUser{
  margin: 52px 0px 15px 0px;
  img{
    width: 110px;
    height: 110px;
    position: relative;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
   }
    span{
      display: block;
      position: relative;
      text-align: center;
      font-size: 16px;
      font-weight: 200;
      margin-top: 9px;
    }
}
.showConfirm{
    text-align: center;
    display: block;
    background: #fff;
    margin-top: 18px;
    padding: 8px 0px 8px 0px;
    margin-bottom: 30px;
}
</style>


